<template>
  <div :class="['service-guarantee', { card: useCard }]">
    <div class="title">
      <img alt="放心订安心飞" src="@/assets/img/title_blue.png"/>
    </div>
    <div class="service-list">
      <div class="service-item">
        <van-icon name="shield-o"/>
        <span>行程保障</span>
      </div>
      <div class="service-item">
        <van-icon name="gold-coin-o"/>
        <span>价格保障</span>
      </div>
      <div class="service-item">
        <van-icon name="service-o"/>
        <span>7*24小时客服</span>
      </div>
      <div class="service-item">
        <van-icon name="warning-o"/>
        <span>应急救援</span>
      </div>
      <div class="service-item">
        <van-icon name="like-o"/>
        <span>安心1 + 1</span>
      </div>
      <div class="service-item">
        <van-icon name="friends-o"/>
        <span>组合交通出行</span>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  useCard: {
    type: Boolean,
    default: false,
  },
});
</script>

<style lang="less" scoped>
.service-guarantee {
  padding: 20px 0;

  &.card {
    margin: 12px;
    background: #fff;
    border-radius: 8px;
  }

  .title {
    text-align: center;
    margin-bottom: 20px;
    padding: 0 16px;

    img {
      height: 20px;
      width: auto;
    }
  }

  .service-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 8px;
    padding: 0 20px;

    .service-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: #666;

      .van-icon {
        font-size: 16px;
        color: #0086f6;
      }
    }
  }
}
</style>
